<template>
	<view class="orderDetails">
		<TopHead :title="'订单详情'"></TopHead>
		<view class="conbox">
			<view class="box1">
				<view class="left-box1" v-if="infoData.status==1">
					<view class="title1">未支付</view>
					<view class="title1-text">买家还未支付</view>
				</view>
				<view class="left-box1" v-if="infoData.status==2">
					<view class="title1">已支付</view>
					<view class="title1-text">买家已支付</view>
				</view>
				<view class="left-box1" v-if="infoData.status==13">
					<view class="title1">卖家已发货</view>
					<view class="title1-text">卖家已经打包好，并以发货</view>
				</view>
				<view class="left-box1" v-if="infoData.status==8">
					<view class="title1">交易已关闭</view>
					<view class="title1-text">再逛逛，下一件一定是有缘分的宝贝。</view>
				</view>
				<view class="left-box1" v-if="infoData.status==3">
					<view class="title1">待评价</view>
					<view class="title1-text">写评价分享您的购物心情吧</view>
				</view>
				<view class="right-icon-box">
					<!-- <view>
						<uni-icons color="#fff" type="checkmarkempty" size="40"></uni-icons>
						<uni-icons color="#fff" type="closeempty" size="40"></uni-icons>
					</view> -->
					<image class="fahuoSta" src="../../static/images/fahuo-icon.png"></image>
					<!-- <image v-if="infoData.status==3" class="fahuoSta" src="../../static/images/fahuo-icon2.png"></image> -->
					<image v-if="infoData.status==4" class="fahuoSta" src="../../static/images/fahuo-icon3.png"></image>
				</view>
			</view>
			<view class="info-box">
				<view class="title-dianpu">
					<uni-icons color="#E47917" class="home-filled-icon" type="home-filled" size="20"></uni-icons>
					{{infoData.orderItemList[0].storeName}}
				</view>
				<view class="goods-Info">
					<view class="itemBox" v-for="(item,index) in infoData.orderItemList" :key="index">
						
						<view class="iten-cont">
							<image class="item-img" :src="path+item.logo"></image>
							<view class="iten-cont-txt">
								<view class="title2">{{item.productEntityName}}
									<view class="title2-pic">￥<text>{{(item.price/100).toFixed(2)}}</text></view>
								</view>
								<view class="title3">
									<text v-for="(ite,j) in item.tagList" :key="j">{{ite}}</text>
									<!-- <text class="num">X{{item.amount}}</text> -->
								</view>
								<view class="title4">规格：
									<text v-for="option in item.orderItemSpecificationList"
										:key="option.id">{{option.orderItemSpecificationValueList[0].value}}(￥{{(option.orderItemSpecificationValueList[0].addPrice/100).toFixed(2)}})、
									</text>
								</view>
							</view>
						</view>
					</view>
					<view class="otherInfo">
						购买数量：<text>x{{infoData.orderItemList[0].amount}}</text>
					</view>
					<view class="otherInfo">
						下单时间：<text>{{infoData.createTime}}</text>
					</view>
					<view class="otherInfo">
						订单编号：<text>{{infoData.orderId}}</text>
					</view>
					<view class="otherInfo">
						支付方式：<text>微信</text>
					</view>
					<view class="otherInfo">
						商品总价：<text>￥{{(infoData.orderPrice/100).toFixed(2)}}</text>
					</view>
				</view>
				<view class="price">
					订单金额：￥{{(infoData.orderPrice/100).toFixed(2)}}
				</view>
			</view>
			<view class="btnBox">
				<view class="btn1" v-if="infoData.status==1" @click.stop="cancelOrder()">取消订单</view>
				<view class="btn2" v-if="infoData.status==1" @click.stop="goPay(item)">付款</view>
				<view class="btn1" v-if="infoData.status==3" @click.stop="toPostEvaluate(infoData)">去评价</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue';
	export default {
		components: {
			TopHead
		},
		data() {
			return {
				orderId: '', // orderId
				infoData: {}, // 信息
				path: this.$http.tpUrl + '/', // 图片前缀
			}
		},
		onLoad(options) {
			console.log(options)
			this.orderId = options.orderId
			this.initData()
		},
		onShow() {

			// this.initData()
		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			// if (this.total > this.list.length) {
			// 	this.page = parseInt(this.page) + 1
			// }
		},
		methods: {
			// 数据请求示例
			initData() {
				let _this = this;
				_this.$http.fetchData({
					url: '/wechatApplet/customer/order/' + _this.orderId,
					method: 'GET',
					data: {},
					success(res) {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// });
						_this.infoData = res.data

					}
				})
			},
			// dianhua
			phoneCall(item) {
				uni.makePhoneCall({
					phoneNumber: '023-62433333' //仅为示例
				});
			},
			// 去评价
			toPostEvaluate(infoData){
				uni.navigateTo({
					url: `/pages_category_page1/mine/postEvaluate?orderId=${infoData.orderId}&logo=${infoData.orderItemList[0].logo}&productEntityName=${infoData.orderItemList[0].productEntityName}`
				})
			},
			// 取消订单
			cancelOrder(){
				console.log('取消订单')
			},

		}
	}
</script>

<style scoped>
	.orderDetails {
		background: #f3f3f3;
	}

	.headBox {
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #232323;
		padding-top: 88rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 112rpx;
		background: linear-gradient(89deg, #f9d7a6 1%, #ffdc95 100%);
	}

	.headBox .wzText {
		line-height: 56rpx;
	}

	.conbox {
		padding: 30rpx;
		padding-top: 240rpx;
		padding-bottom: 80rpx;
	}

	.box1 {
		display: flex;
	}

	.box1 .left-box1 {
		flex: 1;
	}

	.title1 {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
	}

	.title1-text {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		margin-top: 16rpx;
	}

	.box1 .right-icon-box {
		width: 158rpx;
		height: 124rpx;
		margin-right: 65rpx;
	}

	.box1 .right-icon-box .fahuoSta {
		width: 158rpx;
		height: 124rpx;
	}

	/* .box1 .right-icon-box>view {
		width: 102rpx;
		height: 102rpx;
		background: linear-gradient(180deg,#e47917, #feefe2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	} */
	.info-box {
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93, 69, 41, 0.25);
		padding: 24rpx;
		margin-top: 65rpx;
	}

	.title-dianpu {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
		padding-bottom: 14rpx;
	}
	.home-filled-icon {
		margin-right: 10rpx;
	}

	.goods-Info {
		padding: 40rpx 0;
		border-top: 2rpx dashed #c7c7c7;
		border-bottom: 2rpx dashed #c7c7c7;
	}

	.iten-cont {
		padding: 24rpx 0 32rpx 0;
		display: flex;
	}

	.iten-cont .item-img {
		flex-shrink: 0;
		width: 178rpx;
		height: 178rpx;
		border-radius: 10rpx;
		background-color: #f3f3f3;
	}

	.iten-cont-txt {
		padding-left: 18rpx;
		flex: 1;
	}

	.title2 {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
		position: relative;
		padding-right: 110rpx;
		/* overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap; */
	}

	.title2 .title2-pic {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #f61111;
		line-height: 52rpx;
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -26rpx;
	}

	.title2 .title2-pic text {
		font-size: 40rpx;
	}

	.title3 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #fdab34;
		margin-top: 18rpx;
		position: relative;
	}

	.title3 text {
		display: inline-block;
		line-height: 40rpx;
		background: #fff0db;
		padding: 0 18rpx;
		margin-left: 10rpx;
		border-radius: 10rpx;
	}

	.title3 text:first-child {
		margin-left: 0;
	}

	.title3 .num {
		line-height: 32rpx;
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -16rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		background: none;
		padding: 0;
		margin: 0;
	}

	.title4 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		margin-top: 12rpx;

	}

	.otherInfo {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		margin-bottom: 24rpx;
	}

	.goods-Info .otherInfo:last-child {
		margin-bottom: 0;
	}

	.otherInfo text {
		color: #000000;
	}

	.price {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
		text-align: right;
		padding-top: 30rpx;
		padding-bottom: 36rpx;
	}

	.btnBox {
		text-align: right;
		line-height: 78rpx;
		margin-top: 80rpx;
	}

	.btnBox>view {
		width: 216rpx;
		display: inline-block;
		text-align: center;
		margin-right: 20rpx;
	}

	.btnBox>view:last-child {
		margin-right: 0;
	}

	.btnBox .btn1 {
		background: #e9e9e9;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #404040;
	}

	.btnBox .btn2 {
		background: #e47917;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #ffffff;
	}
</style>